<script setup lang="ts">
import useStore from '@/store';
import { storeToRefs } from 'pinia';
const { user } = useStore();
const { mail, password } = storeToRefs(user);
const { doLogin } = user;
</script>

<template>
  <div class="LorR-model login-model">
    <input class="LorR-txt" v-model="mail" type="text" placeholder="请输入您的邮箱" />
    <input class="LorR-txt" v-model="password" type="password" placeholder="请输入您的密码" />
    <input class="LorR-btn" @click="doLogin()" type="submit" value="登 录" />
  </div>
</template>

<style lang="scss" scoped>
@import "@/assets/global";

input::-webkit-input-placeholder {
  color: #949494;
}

input {
  border: none,
}

.LorR-model {
  float: left;
  width: 100%;
  margin-top: 42px;

  .LorR-txt {
    display: block;
    width: 95%;
    height: 55px;
    font-size: larger;
    background-color: #f7f8fa;
    color: #666;
    border-radius: 12px;
    padding-left: 18px;
  }

  .LorR-btn {
    display: block;
    width: 100%;
    height: 55px;
    margin-top: 30px;
    background-color: $theme;
    color: #fff;
    border-radius: 25px;
    cursor: pointer;
    font-size: medium;
    outline: none;
  }
}

.login-model {
  .LorR-txt:first-child {
    margin-bottom: 30px;
  }
}
</style>
